<template>
    <!-- 搜索推荐组件 -->
    <div class="recommend">
        <ul class="tagClass">
            <li class="btn" v-for="(con,i) of btnArr" :key="i" @click="dealClick($event,i)" :class="{active:i==0}" ref="btn">
                {{con}}
            </li>
        </ul>
        <div class="content" >
            <el-progress type="circle" :percentage="0"></el-progress>
            <el-progress type="circle" :percentage="25"></el-progress>
            <el-progress type="circle" :percentage="100" status="success"></el-progress>
            <el-progress type="circle" :percentage="70" status="warning"></el-progress>
            <el-progress type="circle" :percentage="50" status="exception"></el-progress>
        </div>
    </div>
</template>

<style scoped>
    .recommend {
        width: 895px;
        margin: auto;
        font-family:arial;
        font-size:12px;
        font-weight:400;
        text-align:center;
        border: 1px solid #9a9da2;
        user-select: none;
    }
    .tagClass {
        height: 38px;
        text-align: left;
        list-style: none;
        display: flex;
        justify-content: left;
    }
    .btn {
        height: 100%;
        line-height: 38px;
        padding: .2rem 1rem;
        box-sizing: border-box;
        border: 0;
        border-radius: 0;
    }
    .btn:hover {
        background-color: #b3b6bb!important;
        color: #fff;
    }
    .active {
        background-color: #9a9da2!important;
        color: #fff;
        font-weight: 700;
    }
    .content {
        height: 300px;
        padding: 1rem;
    }
</style>
<script>
export default {
    data(){
        return {
            btnArr:['推荐','导航']
        }
    },

    methods:{
        dealClick(e,i){
            this.$nextTick(()=>{
                this.$refs.btn.forEach((item)=>{
                    item.className='btn'
                })
                this.$refs.btn[i].className='btn active'
            })
        }
    }
}
</script>